<template>
  <button 
    class="fu-button"
    :class="[
      `fu-button--${type}`,
      `fu-button--${size}`,
      {
        'fu-button--plain': plain,
        'fu-button--disabled': disabled,
        'fu-button--loading': loading,
        'fu-button--round': round,
        'fu-button--block': block
      }
    ]"
    :form-type="formType"
    :open-type="openType"
    :app-parameter="appParameter"
    :hover-stop-propagation="hoverStopPropagation"
    :lang="lang"
    :session-from="sessionFrom"
    :send-message-title="sendMessageTitle"
    :send-message-path="sendMessagePath"
    :send-message-img="sendMessageImg"
    :show-message-card="showMessageCard"
    :hover-class="!disabled && !loading ? 'fu-button--active' : ''"
    :disabled="disabled"
    @click="handleClick"
    @getuserinfo="handleGetUserInfo"
    @contact="handleContact"
    @getphonenumber="handleGetPhoneNumber"
    @error="handleError"
    @opensetting="handleOpenSetting"
    @launchapp="handleLaunchApp"
    @chooseavatar="handleChooseAvatar"
  >
    <view class="fu-button__content">
      <view v-if="loading" class="fu-button__loading">
        <view class="fu-loading-circle"></view>
      </view>
      <slot></slot>
    </view>
  </button>
</template>

<script>
/**
 * fu-button 按钮组件
 * @description 基础按钮组件，支持多种状态和样式
 * @property {String} type - 按钮类型，可选值：primary/success/warning/error/info
 * @property {String} size - 按钮尺寸，可选值：large/normal/small/mini
 * @property {Boolean} plain - 是否镂空
 * @property {Boolean} disabled - 是否禁用
 * @property {Boolean} loading - 是否加载中
 * @property {Boolean} round - 是否圆角按钮
 * @property {Boolean} block - 是否为块级元素
 * @property {String} formType - 用于 form 组件，可选值为 submit/reset
 * @property {String} openType - 开放能力，具体见uniapp文档
 * @property {String} appParameter - 打开 APP 时，向 APP 传递的参数
 * @property {Boolean} hoverStopPropagation - 指定是否阻止本节点的祖先节点出现点击态
 * @property {String} lang - 指定返回用户信息的语言，zh_CN/en
 * @property {String} sessionFrom - 会话来源
 * @property {String} sendMessageTitle - 会话内消息卡片标题
 * @property {String} sendMessagePath - 会话内消息卡片点击跳转小程序路径
 * @property {String} sendMessageImg - 会话内消息卡片图片
 * @property {Boolean} showMessageCard - 是否显示会话内消息卡片
 * @event {Function} click - 点击按钮时触发
 * @event {Function} getuserinfo - 用户点击该按钮时，会返回获取到的用户信息
 * @event {Function} contact - 客服消息回调
 * @event {Function} getphonenumber - 获取用户手机号回调
 * @event {Function} error - 当使用开放能力时，发生错误的回调
 * @event {Function} opensetting - 在打开授权设置页后回调
 * @event {Function} launchapp - 打开 APP 成功的回调
 * @event {Function} chooseavatar - 获取用户头像回调
 */
export default {
  name: 'fu-button',
  props: {
    type: {
      type: String,
      default: 'default'
    },
    size: {
      type: String,
      default: 'normal'
    },
    plain: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    round: {
      type: Boolean,
      default: false
    },
    block: {
      type: Boolean,
      default: false
    },
    formType: {
      type: String,
      default: ''
    },
    openType: {
      type: String,
      default: ''
    },
    appParameter: {
      type: String,
      default: ''
    },
    hoverStopPropagation: {
      type: Boolean,
      default: false
    },
    lang: {
      type: String,
      default: 'zh_CN'
    },
    sessionFrom: {
      type: String,
      default: ''
    },
    sendMessageTitle: {
      type: String,
      default: ''
    },
    sendMessagePath: {
      type: String,
      default: ''
    },
    sendMessageImg: {
      type: String,
      default: ''
    },
    showMessageCard: {
      type: Boolean,
      default: false
    }
  },
  emits: ['click', 'getuserinfo', 'contact', 'getphonenumber', 'error', 'opensetting', 'launchapp', 'chooseavatar'],
  methods: {
    handleClick(e) {
      if (!this.disabled && !this.loading) {
        this.$emit('click', e)
      }
    },
    handleGetUserInfo(e) {
      this.$emit('getuserinfo', e)
    },
    handleContact(e) {
      this.$emit('contact', e)
    },
    handleGetPhoneNumber(e) {
      this.$emit('getphonenumber', e)
    },
    handleError(e) {
      this.$emit('error', e)
    },
    handleOpenSetting(e) {
      this.$emit('opensetting', e)
    },
    handleLaunchApp(e) {
      this.$emit('launchapp', e)
    },
    handleChooseAvatar(e) {
      this.$emit('chooseavatar', e)
    }
  }
}
</script>

<style lang="scss" scoped>
.fu-button {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  background-color: transparent;
  &::after {
    border: none;
  }
  
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 30rpx;
  font-size: var(--fu-font-size-base);
  height: 80rpx;
  line-height: 1;
  text-align: center;
  border-radius: var(--fu-radius-base);
  border: 2rpx solid transparent;
  transition: all 0.2s;
  box-sizing: border-box;
  width: fit-content;
  
  // 默认样式
  background-color: #fff;
  color: var(--fu-text-color);
  border-color: var(--fu-border-color);
  
  // 块级按钮
  &--block {
    display: flex;
    width: auto;
    margin-left: 0;
    margin-right: 0;
  }
  
  // 尺寸
  &--large {
    height: 96rpx;
    padding: 0 40rpx;
    font-size: var(--fu-font-size-lg);
  }
  
  &--normal {
    height: 80rpx;
    padding: 0 30rpx;
    font-size: var(--fu-font-size-base);
  }
  
  &--small {
    height: 64rpx;
    padding: 0 20rpx;
    font-size: var(--fu-font-size-sm);
  }
  
  &--mini {
    height: 48rpx;
    padding: 0 16rpx;
    font-size: var(--fu-font-size-xs);
  }
  
  // 类型
  &--primary {
    background-color: var(--fu-primary-color);
    border-color: var(--fu-primary-color);
    color: #ffffff;
  }
  
  &--success {
    background-color: var(--fu-success-color);
    border-color: var(--fu-success-color);
    color: #ffffff;
  }
  
  &--warning {
    background-color: var(--fu-warning-color);
    border-color: var(--fu-warning-color);
    color: #ffffff;
  }
  
  &--danger {
    background-color: var(--fu-danger-color);
    border-color: var(--fu-danger-color);
    color: #ffffff;
  }
  
  // 朴素按钮
  &--plain {
    background-color: transparent;
    
    &.fu-button--primary {
      color: var(--fu-primary-color);
    }
    
    &.fu-button--success {
      color: var(--fu-success-color);
    }
    
    &.fu-button--warning {
      color: var(--fu-warning-color);
    }
    
    &.fu-button--danger {
      color: var(--fu-danger-color);
    }
  }
  
  // 禁用状态
  &--disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  
  // 点击状态
  &--active {
    opacity: 0.8;
  }
  
  // 圆角按钮
  &--round {
    border-radius: 80rpx;
  }
  
  // loading状态
  &__loading {
    margin-right: 10rpx;
    animation: fu-rotate 1s linear infinite;
    
    .fu-loading-circle {
      width: 28rpx;
      height: 28rpx;
      border: 4rpx solid;
      border-color: currentColor currentColor currentColor transparent;
      border-radius: 50%;
    }
  }
  
  &__content {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@keyframes fu-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style> 